<!-- 当父元素设置溢出隐藏时，子元素显示不全时会显示提示框 -->
<template>
  <a-popover :open="open" v-bind="props">
    <div class="text" @mouseenter="handleMouseenter" @mouseleave="open = false" @click="handleClick">
      <slot></slot>
    </div>
  </a-popover>
</template>
<script setup lang="tsx">
  import { ref } from 'vue';
  import { type PopoverProps } from 'ant-design-vue';
  /* 引入字符串处理工具类，使用其中 copyToClipboard 方法 */
  import { StringUtil } from '@/utils/utils';

  interface Props extends Omit<PopoverProps, 'open' | 'visible'> {
    copy?: boolean;
  }

  const props = withDefaults(defineProps<Props>(), {
    placement: 'topLeft',
  });

  const open = ref(false);

  function handleMouseenter(e: any) {
    const { clientWidth, scrollWidth } = e.target;
    if (clientWidth < scrollWidth) {
      open.value = true;
    } else {
      open.value = false;
    }
  }

  function handleClick() {
    if (!props.copy) {
      return;
    }
    StringUtil.copyToClipboard(props.content);
  }
</script>
<style lang="less" scoped>
  .text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>
